<template>
	<view class=" min100 plr-30 pb-100 bg">
		<view class="flex radius-45 mb-30 ptb-12 plr-10" style="background:#fff">
			<view :class="['radius-34','ptb-20','midItem',midIndex==0?'midActive':'']" @click="changeMid(0)">
				藏品
			</view>
			<view :class="['radius-34','ptb-20','midItem',midIndex==1?'midActive':'']" @click="changeMid(1)">
				盲盒
			</view>
		</view>
		<empty v-if="list.length==0"></empty>
		<view v-else>
			<view v-for="(item,index) in list" :key="index"
				class="size-22 flex flex-start flex-top mb-30 radius-20 plr-30 ptb-30">
				<image :src="item.image" class="itemImg mr-20 radius-20"></image>
				<view style="width:75%;">
					<view class="white flex mb-20 flex-between">
						<view class="">
							{{item.name}}
						</view>
						<view class="size-30 red">
							￥{{item.price}}
						</view>
					</view>
					<view class="white flex flex-between mb-20">
						<view class="">
							受赠人
						</view>
						<view class="">
							{{item.phone.substr(0,3)+"****"+item.phone.substr(7)}}
						</view>
					</view>
					<view class="white flex flex-between">
						<view class="">
							转赠时间
						</view>
						<view class="">
							{{item.create_time}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import empty from "../../components/empty.vue"
	export default {
		components: {
			empty
		},
		data() {
			return {
				flag: false, //上拉加载
				status: 'more',
				midIndex: 0,
				query: {
					page: 1,
					pagesize: 10,
					search: "",
					time_order: '',
					price_order: ''
				},
				list: []
			}
		},
		onHide() {
			this.list=[];
		},
		onLoad() {
			this.initCollect();
		},
		methods: {
			changeMid(index) {
				this.list = [];
				this.midIndex = index;
				if (index == 0) {
					this.initCollect();
				} else {
					this.initBox();
				}
			},
			initCollect() {
				this.$http('api/orders/goodsTransferList').then(res => {
					this.list = res;
				})
			},
			initBox() {
				this.$http('api/orders/boxTransferList').then(res => {
					this.list = res;
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.midItem {
		width: 335rpx;
		height: 68rpx;
		color: #999;
		font-size: 26rpx;
		text-align: center;
	}

	.midActive {
		background: #44ACFF;
		color: #fff;
	}

	.itemImg {
		width: 150rpx;
		height: 150rpx;
	}
</style>
